<template>
  <div>
    <Form ref="formInline" :model="formInline" :label-width="60">
      <Row>
        <Col span="8" offset="8">
          <FormItem prop="toUsername" label="收件人">
            <i-input
              type="text"
              v-model="formInline.toUsername"
              placeholder="Username"
            >
            </i-input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="8" offset="8">
          <FormItem prop="title" label="标题">
            <i-input type="text" v-model="formInline.title" placeholder="Title">
            </i-input>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="18" offset="3">
          <FormItem prop="context" label="内容">
            <i-input
              type="textarea"
              v-model="formInline.context"
              placeholder="Context"
            >
            </i-input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div>
      <i-button type="primary" @click="sendMail">发送</i-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        toUsername: '',
        title: '',
        context: ''
      }
    }
  },
  methods: {
    sendMail() {
      const formData = {
        token: localStorage.getItem('token'),
        user_id: localStorage.getItem('_id'),
        username: localStorage.getItem('username'),
        toUsername: this.formInline.toUsername,
        title: this.formInline.title,
        context: this.formInline.context
      }
      this.$http
        .post('http://localhost:3000/user/sendEmail', formData, {
          emulateJSON: true
        })
        .then(({ body }) => {
          const { status, message } = body
          if (status === 200) {
            this.$Message.success({
              content: message,
              duration: 2,
              closable: true
            })
            this.formInline.toUsername = ''
            this.formInline.title = ''
            this.formInline.context = ''
          }
        })
    }
  }
}
</script>
